<template>
	<view class="cont">
		<view><u-toast ref="uToast" /></view>
		<uni-icons type="back" size="30"></uni-icons>
		<h1 >手机号登录</h1>
		<text class="txt">未注册的手机号将自动创建账号</text>
		<u-form :model="form" ref="uForm" class="out">
			<u-form-item label="手机号" prop="phone" border-bottom="true" heigth="100px" type="text" confirm-type="s">
				<u-input v-model="form.phone" border="true"  />
			</u-form-item>
			<u-form-item label="验证码"  border-bottom="true" prop="intro" >
				<u-input type="text" v-model="form.intro" />
				<view class="yleft"><u-button @click="gain">获取验证码</u-button></view>
			</u-form-item>
		</u-form>
		<u-checkbox-group >
			<u-checkbox v-model="checked" shape="circle" @change="checkboxChange" ></u-checkbox><text>我也阅读并同意用户协议和隐私政策</text>
		</u-checkbox-group>
		{{yzm}}
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>

export default {

	data() {
		return {
			form: {
				phone: ''
				
			},
			intro:'',
			checked:false,
			ifbox:'',
			yzm:'',
			// rules: {
			// 	phone: [
			// 		{ 
			// 			required: true, 
			// 			message: '请输入手机号', 
			// 			// 可以单个或者同时写两个触发验证方式 
			// 			trigger: 'blur',
			// 		},
			// 		{
			// 					// 自定义验证函数，见上说明
			// 					validator: (rule, value, callback) => {
			// 						// 上面有说，返回true表示校验通过，返回false表示不通过
			// 						// this.$u.test.mobile()就是返回true或者false的
			// 						return this.$u.test.mobile(value);
			// 					},
			// 					message: '手机号码不正确',
			// 					// 触发器可以同时用blur和change
			// 					trigger: 'blur',
			// 				}
			// 	],
			// 	intro: [
			// 		{
			// 			required:true,
			// 			message: '验证码不能为空', 
			// 			trigger:  'change'
			// 		}
			// 	]
			// }
		};
	},

	methods: {
		//消息提事
		showToast() {
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success'
							// url: '/pages/user/index'
						})
					},
		//获取验证码
		gain(){
			if(this.form.phone.length==11){
			const baseUrl="http://localhost:8888"
			uni.request({
				url:baseUrl+'/s/ignin/yzm',
				method:"Get",
				data:this.form
			}).then(res=>{
				this.yzm=res.data
				this.$refs.uToast.show({
					type: 'success',
					title: res.data
					})
			})
			}else{
				
				this.$refs.uToast.show({
					title : '请输入正确的手机号',
					type: 'error'
					})
			}
		},
		//勾选
		checkboxChange(e){
			this.ifbox=e
		},
		// 注册
		submit() {
			
			const baseUrl="http://localhost:8888"
			uni.request({
				url:baseUrl+'/s/ignin/find',
				method:"POST",
				data:this.form,
			}).then(res=>{
				if(res.data.code==20041){
					this.$store.commit('changecount',res.data.data)
					uni.switchTab({
						url:'/pages/homepage/homepage'
					})
				}else{
					console.log(1)
					const baseUrl="http://localhost:8888"
					uni.request({
						url:baseUrl+'/s/ignin/addphone',
						method:"POST",
						data:this.form,
					}).then(res=>{
					
						this.$store.commit('changecount',res.data.data)
						console.log(res.data.data);
						
						uni.navigateTo({
							url:'/pages/show/show'
						})
					})
				}
			
			})
			
			
			
			// if(this.form.intro=="12345"){
			// if(this.ifbox){
			// const baseUrl="http://localhost:8888"
			// uni.request({
			// 	url:baseUrl+'/s/ignin/addphone',
			// 	method:"POST",
			// 	data:this.form,
			// }).then(res=>{

			// 	this.$store.commit('changecount',res.data.data)
			// 	console.log(res.data.data);
				
			// 	uni.navigateTo({
			// 		url:'/pages/show/show'
			// 	})
			// })
			// }else{
			// 	console.log("请勾选")
			// }
			// }else{
			// 	console.log("请输入验证码")
			// }
		},
		
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>
<style >
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
}
.cont{
	margin-top: 100rpx;
}
.h{
	color: firebrick;
}
.txt{
	font-size: 10px;
	opacity: 0.8;
}
/* .out{
	padding: 20px;
	row{
		margin-bottom: 8rpx;
	}
	.border{
		padding: 20px;
	}
} */
.custom-style {
		color: #606266;
		width: 100rpx;
	}
.yleft{
	width: 100px;
	margin-right: 0px;
}
</style>